<template>
	<view class="">
		<view class="items example" style="margin-top: 20rpx;">
			<uni-forms ref="form" :modelValue="formData" :rules="rules" label-width="200rpx" label-position="rigth">
				<view class="" style="padding: 30rpx;">
					<uni-forms-item label="商家名称" name="name">
						<view class="value flex-end" style="padding-top: 14rpx;">
							<uni-easyinput type="text" v-model="formData.name" placeholder="请输入"
								placeholder-class="class" :data-key="formData.name" class="input" />
							<!-- <uni-easyinput type="digit" @input="change" placeholder="请输入姓名"> -->
						</view>
					</uni-forms-item>
					<view class="" style="border-bottom: 1rpx solid #E8E8E8;"></view>
					<uni-forms-item label="联系人" name="contact">
						<view class="" style="padding-top: 14rpx;">
							<uni-easyinput type="text" v-model="formData.contact" placeholder="请输入"
								placeholder-class="class" :data-key="formData.contact" class="input" />
						</view>
					</uni-forms-item>
					<view class="" style="border-bottom: 1rpx solid #E8E8E8;"></view>

					<uni-forms-item label="手机号" name="phone">
						<view class="" style="padding-top: 14rpx;">
							<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入"
								placeholder-class="class" :data-key="formData.phone" class="input" />
						</view>
					</uni-forms-item>
					<view class="" style="border-bottom: 1rpx solid #E8E8E8;"></view>

					<uni-forms-item label="所在地区" name="location" class="picker flex-end">
						<view class="picker flex-end" style="padding-top: 14rpx;">
							<view>
								<picker @change="bindPickerChange" v-model="formData.location" :range="array">
									<view class="picker-right">
										<view v-if="formData.location">{{array[index]}}</view>
										<view class="uni-input" v-else>请选择</view>
										<view class="img">
											<!-- <image class="icon" src="../../../../static/my/icon-right.png"></image> -->
										</view>
									</view>
								</picker>
							</view>
						</view>
					</uni-forms-item>
					<view class="" style="border-bottom: 1rpx solid #E8E8E8;"></view>

					<uni-forms-item label="开店时间" name="opentingTime">
						<!-- 	<view class="" style="padding-top: 14rpx;">
							<uni-data-checkbox v-model="formData.idType" :localdata="idTypeArray" @change="changeidType"
								class="checkBox" selectedColor="#0ABA94"></uni-data-checkbox>
						</view> -->
						<view class="picker flex-end" style="padding-top: 14rpx;">
							<view>
								<picker @change="datePickerChange" :value="formData.opentingTime" :range="array"
									mode="date">
									<view class="picker-right">
										<view v-if="formData.opentingTime">{{formData.opentingTime}}</view>
										<view class="uni-input" v-else>请选择</view>
										<view class="img">
											<!-- <image class="icon" src="../../../../static/my/icon-right.png"></image> -->
										</view>
									</view>
								</picker>
							</view>
						</view>
					</uni-forms-item>
					<view class="" style="border-bottom: 1rpx solid #E8E8E8;"></view>
					<uni-forms-item label="店铺简介" name="stroeIntro" class=" flex-bt active2">
					</uni-forms-item>
					<textarea v-model="formData.stroeIntro" @input="change" :data-key="formData.stroeIntro"
						placeholder="请输入" cols="30" rows="10" class="active2 flex-bt"
						placeholder-class="introduction-class"></textarea>
					<view class="" style="border-bottom: 1rpx solid #E8E8E8;"></view>
					<uni-forms-item label="上传证件照片" name="imgUrl"> </uni-forms-item>
					<uni-file-picker ref="files" @select="select" @progress="progress" @success="success" @fail="fail"
						:auto-upload="false" v-model="imgUrl" file-mediatype="image" @delete="deleteImg" />
					<view class="" style="border-bottom: 1rpx solid #E8E8E8;">
					</view>
					<view class="radio m-t-60" @click="setCheck()">
						<radio value="r1" color='#0ABA94' :checked="check" />我已阅读并同意
						<span class="rd" @click.stop="toPrivacyAgreement(4)">
							{{title}}
						</span>
					</view>
					<uni-forms-item label="" name="isDefault" label-width="0rpx">
						<view class="" style="padding-top: 14rpx;">
							<uni-data-checkbox v-model="formData.isDefault" :multiple="true" class="checkBox"
								:localdata="defaultArray" selectedColor="#0ABA94"></uni-data-checkbox>
						</view>
					</uni-forms-item>
				</view>
				<view class="" style="border-bottom: 20rpx solid #F1F4FC;">

				</view>
				<!-- <view class="" style="padding: 30rpx;">

				</view> -->
			</uni-forms>
			<view class="" style="height: 200rpx;background: #F1F4FC;">

			</view>
		</view>
		<view class="" style="position: fixed; bottom: 30rpx;">

			<view class="" style="display: flex; justify-content: center;width: 750rpx;">
				<button class="button" @click="submit">提交</button>
			</view>

		</view>
	</view>


</template>

<script setup lang="ts">
	import requestHttp from '@/providers/essential/httpService.js'
	import { ref, getCurrentInstance } from 'vue';
	const {
		proxy
	} = getCurrentInstance() as any
	const array = ref(['中国', '美国', '巴西', '日本'])
	const index = ref(0)
	const imgUrl = ref([])
	const rules = ref([])
	const title = ref("<<入住协议>>")
	// const arry = ref([])
	// const title = ref { "<<入住协议>>" }
	const formData = ref({
		no: parseInt(100 * Math.random()),
		name: "",
		contact: "",
		phone: "",
		location: "",
		stroeIntro: "",
		// idCardNumber: "",
		opentingTime: "",
		idCardNumber: []
	})
	let check = ref(false)
	let setCheck = () => {
		check.value = !check.value
	}

	const bindPickerChange = (e) => {
		index.value = e.detail.value
		formData.value.location = array.value[index.value]
	}
	const datePickerChange = (e) => {
		formData.value.opentingTime = e.detail.value
	}

	function select(e) {
		imgUrl.value.push(e.tempFilePaths[0])
		let url = "/app-api/infra/file/upload"
		let data = {
			filePath: e.tempFilePaths[0],
			name: 'file'

		}
		// console.log(data, 'data')
		requestHttp.uploadData(url, data).then((res) => {
			if (res.code == 0) {
				formData.value.idCardNumber.push(res.data)

			}
		})
	}

	function deleteImg(e) {
		if ((typeof formData.value.idCardNumber) == "string") {
			formData.value.idCardNumber = formData.value.idCardNumber.split(",")
		}
		formData.value.idCardNumber.splice(e.index, 1)
	}


	function submit() {
		// addMerchants
		if (check.value === true) {
			formData.value.idCardNumber = formData.value.idCardNumber.toString()
			let url = proxy.$API.addMerchants
			let param = {
				...formData.value
			}
			proxy.$UNIHTTP.postData(url, param).then((res: any) => {
				if (res.code == -1) {
					uni.showToast({
						title: "入驻成功！！"
					});
				}
			})
		} else {
			uni.showToast({
				title: "请勾选同意！"
			});
		}
	}
</script>

<style lang="scss">
	page {
		background: #F1F4FC;
	}


	.example {
		/* width: 100%; */
		/* padding: 30rpx; */
		background-color: #fff;
	}


	.button {


		display: flex;
		align-items: center;
		justify-content: center;
		width: 680rpx;
		/* margin: 56upx auto; */
		background-color: #0ABA94;
		color: #FFFFFF;
		font-size: 32upx;
		border-radius: 40rpx;
		height: 80rpx;
	}

	.class {
		text-align: right;
		// margin-bottom: -10px;
	}

	.input {
		text-align: right;

		.uni-input-wrapper {
			margin-top: 10px;
		}
	}

	.picker {
		// background-color: #0ABA94;
		width: 100%;

		.img {
			width: 5%;

			.icon {
				width: 32rpx;
				height: 32rpx;
				display: block;
				margin-left: 16rpx;
			}

		}

		.uni-input {
			&.placeholder {
				color: rgba(140, 143, 148, 1);
			}
		}
	}

	.picker-right {
		display: flex;
		justify-content: flex-end;

		.uni-input {
			color: #808080;
		}
	}

	textarea {
		width: 100%;
		display: block;
		height: 120rpx;
	}

	.introduction {
		display: flex;
	}

	.items {
		width: 100%;

		&.active2 {
			height: auto;
			flex-wrap: wrap;

			.label {
				width: 100%;
				padding-top: 28rpx;
			}

			.value {
				width: 100%;
				flex: inherit;
				margin-top: 32rpx;
			}
		}
	}

	.flex-bt {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.introduction-class {
		width: 370px;
	}

	.rd {
		color: #0ABA94;
	}
</style>
